標題：SVG 檔案在網站中的優化完整指南
描述：如何正確使用與優化 SVG 檔案，提升網站效能並保持視覺質量
最後更新：2025-06-29
版本：v2.0
作者：rj0217
來源：COVIA官方知識
SVG 檔案在網站中的優化完整指南
什麼是 SVG 檔案？
SVG (Scalable Vector Graphics) 是基於 XML 的向量圖形格式，與 PNG、JPEG 等點陣圖格式不同，SVG 不會因放大而失真，適合用於網站的標誌、圖標和插圖。
SVG 與網站效能的關係
SVG 的優勢
- 可縮放性：無論尺寸如何，都不會失真
- 檔案較小：通常比同等視覺效果的高解析度點陣圖小
- 可互動：支援 CSS 動畫和 JavaScript 互動
- 可訪問性：可被搜尋引擎識別和讀取
影響 SVG 效能的主要因素
SVG 的效能影響不主要取決於像素尺寸（如 2736×995），而是：
- 路徑複雜度：SVG 中的路徑點數量
- 元素數量：圖形中的形狀、路徑、文字等元素總數
- 效果使用：濾鏡、漸變、陰影等特效的數量和複雜度
使用 AI 工具生成的 SVG 特性
使用 Adobe 等 AI 工具生成的 SVG 文件可能存在以下特點：
- 可能包含大量自動生成的節點和路徑
- 有時會包含不必要的元數據
- 可能未經過代碼優化
SVG 優化工具詳解
SVGOMG - 網頁界面優化工具
SVGOMG (https://jakearchibald.github.io/svgomg/) 是 SVGO 的網頁界面版本，提供了直觀的使用體驗：
優勢：
- 拖放式操作，無需安裝軟體
- 即時預覽優化效果
- 可選擇性啟用/停用各種優化選項
SVGOMG 設定選項完整詳解
SVGOMG 提供多種優化選項，以下是完整的功能詳解，分類整理以幫助你做出最佳選擇：
全域設定
| 設定 | 功能說明 | 建議 |
|---|---|---|
| Show original | 顯示原始 SVG，用於對比優化前後的差異 | 用於比較 |
| Compare gzipped | 比較壓縮後的檔案大小，更接近實際網頁傳輸大小 | 建議開啟 |
| Prettify markup | 美化代碼排版，會增加檔案大小 | 關閉以獲得最佳壓縮 |
| Multipass | 進行多次優化，可以獲得更好的壓縮效果 | 建議開啟 |
| Number precision | 數值精確度，調低可以減少小數點位數 | 建議設為 2-3 |
| Transform precision | 變形矩陣精確度，同樣可以調低以提高壓縮率 | 建議設為 3-4 |
基礎優化選項（低風險）
| 設定 | 功能說明 | 建議 |
|---|---|---|
| Remove doctype | 移除 DOCTYPE 宣告 | 網頁中通常安全可移除 |
| Remove XML instructions | 移除 XML 指令 | 網頁中通常不需要 |
| Remove comments | 移除註釋 | 可安全移除以減少大小 |
| Remove metadata | 移除中繼資料 | 如不需要作者資訊等可移除 |
| Remove editor data | 移除編輯器添加的資料 | 安全移除 |
| Clean up attribute whitespace | 清理屬性中的空白 | 建議開啟 |
| Remove empty attrs | 移除空屬性 | 建議開啟 |
| Remove empty containers | 移除空的容器元素 | 建議開啟 |
| Remove empty text | 移除空白文字節點 | 建議開啟 |
| Remove unused defs | 移除未使用的定義元素 | 建議開啟 |
| Remove unused namespaces | 移除未使用的XML命名空間聲明 | 建議開啟 |
| Remove xmlns | 在非獨立 SVG 檔案中可移除命名空間 | 嵌入HTML時可開啟 |
| Minify colours | 簡化顏色表示法（如 #FFFFFF → #FFF） | 建議開啟 |
| Sort attrs | 對屬性進行排序，提高壓縮效率 | 建議開啟 |
| Sort children of <defs> | 排序定義區塊的子元素 | 建議開啟 |
中度優化選項（微小視覺影響）
| 設定 | 功能說明 | 建議 |
|---|---|---|
| Round/rewrite numbers | 四捨五入數值，減少小數點位數 | 建議開啟 |
| Round/rewrite number lists | 簡化數值列表，如路徑坐標 | 視情況開啟 |
| Merge styles | 合併相同的樣式，減少重複 | 建議開啟 |
| Inline styles | 將樣式內聯化，減少 CSS 區塊 | 建議開啟 |
| Minify styles | 最小化樣式代碼 | 建議開啟 |
| Style to attributes | 將樣式轉換為屬性 | 視情況開啟 |
| Remove unknowns & defaults | 移除未知屬性和預設值 | 建議開啟 |
| Remove unneeded group attrs | 移除不必要的群組屬性 | 建議開啟 |
| Remove useless stroke & fill | 移除沒有實際效果的描邊和填充設定 | 建議開啟 |
| Clean up IDs | 清理和簡化 ID 名稱 | 如不依賴特定ID可開啟 |
功能性影響選項（謹慎使用）
| 設定 | 功能說明 | 建議 |
|---|---|---|
| Remove <title> | 移除標題元素 | 影響可訪問性，視情況使用 |
| Remove <desc> | 移除描述元素 | 影響可訪問性，視情況使用 |
| Remove viewBox | 移除視圖框 | 不建議開啟，影響響應式顯示 |
| Prefer viewBox to width/height | 使用 viewBox 代替寬高屬性 | 嵌入網頁時建議開啟 |
| Remove style elements | 移除樣式元素 | 視情況使用 |
| Remove script elements | 移除JavaScript | 移除互動功能 |
| Remove raster images | 移除內嵌的點陣圖像 | 僅當確定不需要時開啟 |
路徑和結構優化選項（可能影響視覺效果）
| 設定 | 功能說明 | 建議 |
|---|---|---|
| Merge paths | 合併相同樣式的相鄰路徑 | 非動畫SVG可開啟 |
| Shapes to (smaller) paths | 將基本形狀轉換為更小的路徑 | 視情況開啟 |
| Round/rewrite paths | 簡化路徑數據 | 可開啟但降低精度 |
| Round/rewrite transforms | 簡化變形矩陣 | 建議開啟 |
| Convert non-eccentric <ellipse> to <circle> | 將非偏心橢圓轉換為圓形 | 建議開啟 |
| Move attrs to parent group | 將屬性移至父群組以減少重複 | 視情況開啟 |
| Move group attrs to elements | 將群組屬性移至個別元素 | 與上一項二選一 |
| Collapse useless groups | 合併或移除不必要的群組結構 | 建議開啟 |
| Remove hidden elements | 移除不可見元素 | 建議開啟 |
| Remove out-of-bounds paths | 移除超出可視區域的路徑 | 視情況開啟 |
| Replace duplicate elements with links | 將重複元素替換為<use>引用 | 視情況開啟 |
針對不同類型SVG的優化設定建議
1. 簡單圖標類
- 可使用所有基礎優化+中度優化
- 可降低數值精度至2
- 建議開啟路徑合併和路徑四捨五入
2. 複雜插圖類
- 謹慎使用路徑相關優化
- 保留適當的精度（3-4）
- 測試路徑合併效果
3. 互動式SVG
- 保留ID、腳本和樣式元素
- 謹慎使用結構變更選項
4. 網頁用SVG
- 開啟「Prefer viewBox to width/height」
- 移除metadata和編輯器數據
- 考慮保留title和desc以增強SEO
SVGO - 命令行優化工具
SVGO (https://github.com/svg/svgo) 是一個開源的 Node.js 命令行工具：
使用場景：
- 適合開發者自動化工作流程
- 可集成到建置系統中
- 適合批量處理多個 SVG 檔案
基本命令：
# 安裝SVGO
npm install -g svgo
# 基本使用
svgo -i input.svg -o output.svg
# 使用設定文件
svgo -i input.svg -o output.svg --config=svgo.config.js
# 批量處理
svgo -f ./icons/ -o ./optimized/
兩者的關係
SVGOMG 和 SVGO 使用相同的優化引擎，區別在於：
- SVGO 是命令行工具，適合技術用戶
- SVGOMG 是網頁界面，適合所有類型的用戶
- 兩者核心功能相同，只是使用方式不同
SVG 優化最佳實踐
1. 優化步驟
- 在設計工具中創建或使用 AI 工具生成 SVG
- 將 SVG 上傳到 SVGOMG
- 調整優化設定：
- 確保保留
viewBox屬性 - 對於互動 SVG，保留必要的 ID 屬性
- 根據需要保留註釋或分組
- 確保保留
- 預覽並下載優化後的 SVG
2. 優化效果判斷
優化效果通常分為以下級別：
- 顯著優化：減少 30-70% 的檔案大小
- 中等優化：減少 10-30% 的檔案大小
- 微小優化：減少不到 10% 的檔案大小
如果優化結果顯示保留率超過 95%（如 15.41k → 14.96k，97.08%），通常表示：
- SVG 已經相當乾淨和優化
- 可能是結構簡單的 SVG
- 主要內容不可進一步優化
3. 在網站中使用 SVG 的代碼示例
在 Markdown 中：
在 HTML 中（帶懶加載）：
<img
src="/img/logo.svg"
alt="標誌說明"
width="100%"
height="auto"
loading="lazy"
/>
作為背景圖像：
.logo-container {
background-image: url('/img/logo.svg');
background-size: contain;
background-repeat: no-repeat;
}
適合與不適合使用 SVG 的場景
適合使用 SVG
- 標誌和圖標
- 簡單插圖和圖表
- 需要互動的圖形
- 需要動畫效果的元素
謹慎使用 SVG
- 極度複雜的場景
- 照片級真實插圖
- 需要豐富紋理的圖像
- 混合內容（如包含照片的組合圖像）
混合內容與替代方案：SVG vs WebP
混合內容的 SVG 優化困境
當 SVG 包含複雜的混合內容（如照片背景加向量元素）時，優化效果往往有限：
- 嵌入的點陣圖（通常以 base64 編碼）佔用大部分空間
- 結構複雜，自動化工具難以優化
- 即使優化 SVG 代碼，整體檔案大小變化不明顯
WebP 作為替代方案
對於混合內容的圖像，WebP 格式可能是更好的選擇：
WebP 的優勢：
- 同時支援有損和無損壓縮
- 比 JPEG 小約 25-35%，比 PNG 小約 26%
- 支援透明度（alpha 通道）
- 幾乎所有現代瀏覽器都支援
轉換工具：
- TinyPNG/TinyJPG：提供WebP轉換
- Squoosh：Google的圖像優化工具
- AConvert：多格式轉換工具
使用案例：
- 對於如「LAJIBRO」宣傳圖這類混合照片和向量的複合圖像，使用 WebP 可將 6MB+ 的檔案壓縮至 2MB 左右
- 適合網站橫幅、產品展示、團隊照片等包含多種元素的大型圖像
混合內容的拆分策略
如果需要保留 SVG 的互動性，可考慮拆分元素：
<div class="banner-container">
<!-- 背景照片使用WebP -->
<img src="background.webp" class="background">
<!-- 純向量元素保留為SVG -->
<svg class="decorations">
<!-- 彩帶、星星等裝飾 -->
</svg>
<!-- 標誌可以單獨優化 -->
<img src="logo.svg" class="logo">
</div>
總結
SVG 是網站中非常有用的圖像格式，尤其適合需要清晰度和可縮放性的場景。通過合理優化，SVG 可以在保持視覺質量的同時提升網站效能。但對於混合內容的複雜圖像，WebP 可能是更有效的替代方案。
優化策略建議：
- 純向量圖形：首選 SVG，使用 SVGOMG 優化
- 照片或真實感圖像：使用 WebP
- 混合內容：考慮拆分或直接使用 WebP
- 針對不同設備：提供響應式圖像方案
進階補充：大型 SVG 的效能優化策略
對於必須使用大型、複雜 SVG 的情況，可考慮以下策略：
-
延遲加載：
<img src="placeholder.svg" data-src="large.svg" class="lazyload" alt="描述" /> -
分割複雜 SVG：將一個大型 SVG 分割為多個小型 SVG
-
考慮使用
<use>元素：重用 SVG 元素來減少代碼重複 -
移除不必要的精確度：減少小數點位數可顯著減小檔案大小
-
手動優化頑固 SVG：
- 用文字編輯器打開 SVG 檔案
- 尋找並移除大量的
metadata、sodipodi或inkscape相關標籤 - 簡化路徑數據，特別是小數點後多位數字
- 考慮將嵌入的 base64 圖像獨立出來
文檔迭代紀錄
協作夥伴戳記
- 向前待考察
- 2025/06/29 Claude 3.7 sonnet 4d8d66d6-245e-416b-a33a-a78b30129ce7